<template>
  <view class="alarm-container">
    
    <!-- 温馨提示 -->
    <view class="warning-notice">
      <text class="warning-text">⚠️ 救援服务不支持高速救援，高速救援请查看【需求说明】</text>
    </view>
    
    <!-- 地图区域 - 使用uni-app原生map组件 -->
    <view class="map-area">
      <map 
        id="map" 
        class="map"
        :longitude="longitude"
        :latitude="latitude"
        :markers="markers as any"
        :show-location="true"
        @tap="handleMapClick"
        @regionchange="handleRegionChange"
      ></map>
      <view class="locate-button" @click="getLocation">
        <text class="locate-icon">📍</text>
      </view>
      
      <!-- WebSocket连接状态 -->
      <view class="connection-status" :class="connectionStatus">
        <text class="status-icon">{{ connectionStatus === 'connected' ? '🟢' : connectionStatus === 'error' ? '🔴' : '🟡' }}</text>
        <text class="status-text">{{ connectionStatus === 'connected' ? '已连接' : connectionStatus === 'error' ? '连接错误' : '连接中...' }}</text>
      </view>
    </view>
    
    <!-- 服务类型选择 -->
    <view class="service-types">
      <view class="service-tab" :class="{ active: activeService === '搭电' }" @click="selectService('搭电')">搭电</view>
      <view class="service-tab" :class="{ active: activeService === '换胎' }" @click="selectService('换胎')">换胎</view>
      <view class="service-tab" :class="{ active: activeService === '拖车' }" @click="selectService('拖车')">拖车</view>
    </view>
    
    <!-- 信息填写表单 -->
    <view class="form-container">
      <!-- 拖车服务显示起点和终点 -->
      <template v-if="activeService === '拖车'">
        <view class="form-item">
          <text class="form-label">起点</text>
          <input class="form-input" v-model="formData.startPoint" placeholder="请输入起点位置" />
        </view>
        
        <view class="form-item">
          <text class="form-label">终点</text>
          <input class="form-input" v-model="formData.endPoint" placeholder="请输入终点位置" />
        </view>
      </template>
      
      <!-- 搭电和换胎服务只显示位置 -->
      <template v-else>
        <view class="form-item">
          <text class="form-label">位置</text>
          <input class="form-input" v-model="formData.location" placeholder="请输入位置信息" />
        </view>
      </template>
      
      <view class="form-item">
        <text class="form-label">求助人</text>
        <input class="form-input" v-model="formData.name" placeholder="请输入求助人姓名" />
      </view>
      
      <view class="form-item">
        <text class="form-label">联系方式</text>
        <input class="form-input" v-model="formData.phone" placeholder="请输入联系电话" />
      </view>
      
      <view class="form-item">
        <text class="form-label">车牌</text>
        <!-- 拖车服务显示车型选择 -->
        <template v-if="activeService === '拖车'">
          <picker @change="bindPickerChange" :value="carTypeIndex" :range="carTypes" class="form-picker">
            <view class="picker">
              {{ formData.carModel || '请选择' }}
            </view>
          </picker>
        </template>
        <template v-else>
          <input class="form-input" v-model="formData.licensePlate" placeholder="请输入车牌号" />
        </template>
      </view>
      
      <!-- 状况描述 -->
      <view class="description-area">
        <text class="description-label">请准确描述当前状况及所需帮助。</text>
      </view>
    </view>
    
    <!-- 紧急联系方式 -->
    <view class="emergency-contacts">
      <text class="emergency-title">警务求助</text>
      <view class="contact-item">
        <text>交通事故</text>
        <text class="contact-number">122</text>
      </view>
      <view class="contact-item">
        <text>火警</text>
        <text class="contact-number">119</text>
      </view>
      <view class="contact-item">
        <text>急救中心</text>
        <text class="contact-number">120</text>
      </view>
      <view class="contact-item">
        <text>公安报警</text>
        <text class="contact-number">110</text>
      </view>
    </view>
    
    <!-- 呼叫救援按钮 -->
    <view class="action-buttons">
      <button class="call-button" @click="callRescue">呼叫救援</button>
      <text class="record-link" @click="goToRecords">救援记录></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
// 导入腾讯地图SDK，使用动态导入避免CommonJS模块问题
let QQMapWX: any;
// 导入storage管理工具
import { getUserId, getUserInfo, isLoggedIn } from '@/utils/storage.js';
// 导入请求工具
import request from '@/utils/request';


// 动态加载腾讯地图SDK
const loadQQMapSDK = async () => {
  try {
    // @ts-ignore - 动态导入CommonJS模块
    const qqmapModule = await import('@/utils/qqmap-wx-jssdk.js');
    
    // 在Vite环境中，CommonJS模块导出的内容通常可以直接通过default获取
    // 但我们仍然需要考虑其他可能性
    let QQMapWXInstance = null;
    
    if (qqmapModule.default) {
      // Vite会将CommonJS模块的module.exports转换为default
      QQMapWXInstance = qqmapModule.default;
      console.log('通过qqmapModule.default获取QQMap构造函数');
    } else if (qqmapModule.QQMapWX) {
      // 直接导出为QQMapWX
      QQMapWXInstance = qqmapModule.QQMapWX;
      console.log('通过qqmapModule.QQMapWX获取构造函数');
    } else if (qqmapModule.exports) {
      // 可能是通过exports导出的
      QQMapWXInstance = qqmapModule.exports.QQMapWX || qqmapModule.exports;
      console.log('通过qqmapModule.exports获取构造函数');
    } else {
      // 最后的可能性是通过整个module对象
      QQMapWXInstance = qqmapModule;
      console.log('使用整个qqmapModule作为构造函数');
    }
    
    // 将获取的构造函数赋值给全局变量
    if (QQMapWXInstance) {
      // 如果取到的是一个构造函数或包含构造函数的模块
      // 尝试获取其中的构造函数
      QQMapWX = QQMapWXInstance.constructor || QQMapWXInstance;
      
      console.log('成功加载QQMapWX构造函数:', QQMapWX);
    } else {
      console.error('无法获取QQMapWX构造函数，所有尝试都失败了');
    }
  } catch (error) {
    console.error('加载QQMap SDK时出错:', error);
  }
};

// import request from '@/utils/request'; // 暂未使用，先注释掉
// 服务类型状态
const activeService = ref('搭电');

// 表单数据 - 使用reactive实现动态响应
const formData = reactive({
  location: '', // 动态获取位置
  startPoint: '', // 动态获取起点
  endPoint: '',
  name: '', // 用户可修改
  phone: '', // 用户可修改
  licensePlate: '', // 用户可修改
  carModel: '' // 用户可修改
});

// 车型数据
const carTypes = ['小型轿车', 'SUV', '商务车', '小型货车', '其他'];
const carTypeIndex = ref(0);

// 地图相关数据
const longitude = ref(113.244); // 默认经度（焦作市）
const latitude = ref(35.211);   // 默认纬度（焦作市）

// 定义markers类型，使用any避免类型冲突
const markers = ref([{
  id: 1,
  longitude: 113.244,
  latitude: 35.211,
  width: 50,
  height: 50,
  title: '当前位置'
}] as any);

// 定义腾讯地图回调参数类型
interface QQMapSuccessResult {
  status: number;
  result: {
    address: string;
    formatted_addresses: {
      recommend: string;
    };
    address_component: {
      nation: string;
      province: string;
      city: string;
      district: string;
      street: string;
    };
  };
}

interface QQMapErrorResult {
  status: number;
  message: string;
}

// 选择服务类型
const selectService = (service: string) => {
  activeService.value = service;
};

// 车型选择事件
const bindPickerChange = (e: any) => {
  const index = e.target.value;
  carTypeIndex.value = index;
  formData.carModel = carTypes[index];
};

// 呼叫救援
const callRescue = async () => {
  // 表单验证
  if (!formData.name || !formData.phone) {
    uni.showToast({
      title: '请填写求助人姓名和联系方式',
      icon: 'none'
    });
    return;
  }
  
  // 构建救援请求数据 - 根据后端Rescue实体类字段
  const rescueData = {
    uid: isLoggedIn() ? parseInt(getUserId() || '0') : 0,
    latitude: latitude.value,
    longitude: longitude.value,
    position: formData.location || formData.startPoint,
    name: formData.name,
    phone: formData.phone,
    carNum: formData.licensePlate,
    description: `${activeService.value}服务 - ${formData.location || formData.startPoint}`,
    status: 0 // 默认待接单状态
  };
  
  console.log('发送救援请求:', rescueData);
  
  try {
      // 调用后端救援接口
      const response = await request({
        url: '/ruoyi-sjl/rescue/create',
        method: 'POST',
        data: rescueData
      });
    
    if (response.code === 200) {
      uni.showToast({
        title: '救援请求已发送',
        icon: 'success'
      });
      
      // 救援请求发送成功后，WebSocket会收到后端推送的消息
      console.log('救援请求成功，等待商家接单');
    } else {
      uni.showToast({
        title: response.msg || '救援请求失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('救援请求失败:', error);
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    });
  }
};

// 跳转到救援记录页面
const goToRecords = () => {
  uni.navigateTo({
    url: '/pages/alarm/alarm-records'
  });
};

// 页面加载时获取位置
onMounted(async () => {
  // 先加载腾讯地图SDK
  await loadQQMapSDK();
  
  // 等待位置获取并完成地址解析
  await new Promise<void>((resolve) => {
    // 页面加载后获取用户位置
    getLocation();
    
    // 添加一个轮询机制，确保getAddressByLocation在QQMap加载后才被调用
    const checkQQMapReady = () => {
      if (QQMapWX) {
        console.log('QQMap已准备就绪');
        resolve();
      } else {
        // 如果没有准备就绪，则1秒后再次检查
        setTimeout(checkQQMapReady, 100);
      }
    };
    
    // 开始检查
    checkQQMapReady();
  });
  
  // 初始化WebSocket连接
  initWebSocket();
});

// 页面卸载时清理资源
const onUnmounted = () => {
  closeWebSocket();
};

// 获取用户位置
const getLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      longitude.value = res.longitude;
      latitude.value = res.latitude;
      console.log('当前位置：', res);
      
      // 更新地图标记
      markers.value = [{
        id: 1,
        longitude: res.longitude,
        latitude: res.latitude,
        width: 50,
        height: 50,
        title: '当前位置'
      }];
      
      // 更新表单中的位置信息
      getAddressByLocation(res.latitude, res.longitude);
      
      uni.showToast({
        title: '定位成功',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('获取位置失败:', err);
      uni.showToast({
        title: '定位失败，请检查定位权限',
        icon: 'none'
      });
    }
  });
};

// 根据经纬度获取地址（使用腾讯地图）
const getAddressByLocation = (lat: number, lng: number): Promise<void> => {
  return new Promise((resolve, reject) => {
    // 检查QQMap是否加载成功
    if (!QQMapWX) {
      console.error('QQMap SDK未正确加载，使用备用地址格式');
      const fallbackAddress = `纬度:${lat.toFixed(6)}, 经度:${lng.toFixed(6)}`;
      formData.location = fallbackAddress;
      formData.startPoint = fallbackAddress;
      resolve();
      return;
    }
    
    try {
      // 初始化腾讯地图实例
      // 请替换为您的腾讯地图API Key
      console.log('正在使用API Key初始化QQMap实例...');
      const qqmapsdk = new QQMapWX({
        key: 'ESRBZ-IETK3-AUL3H-RKCJA-GFCI5-BEFKM' // 需要替换为您的腾讯地图API Key
      });
      
      console.log('QQMap实例创建成功，开始进行逆地址解析...');

      qqmapsdk.reverseGeocoder({
         location: {
           latitude: lat,
           longitude: lng
         },
         success: (res: QQMapSuccessResult) => {
           const address = res.result.address || res.result.formatted_addresses.recommend || `纬度:${lat}, 经度:${lng}`;
           formData.location = address;
           formData.startPoint = address;
           resolve();
         },
         fail: (error: QQMapErrorResult) => {
           console.error('逆地理编码失败:', error);
           // 失败时使用坐标信息
           const fallbackAddress = `纬度:${lat.toFixed(6)}, 经度:${lng.toFixed(6)}`;
           formData.location = fallbackAddress;
           formData.startPoint = fallbackAddress;
           resolve(); // 即使失败也继续执行，避免影响用户体验
         }
       });
     } catch (error) {
       console.error('初始化QQMap失败:', error);
       const fallbackAddress = `纬度:${lat.toFixed(6)}, 经度:${lng.toFixed(6)}`;
       formData.location = fallbackAddress;
       formData.startPoint = fallbackAddress;
       resolve();
     }
  });
};

// 地图点击事件 - 使用any类型避免TypeScript错误
const handleMapClick = (e: any): void => {
  console.log('地图点击位置:', e.detail);
  // 可以在这里处理地图点击事件
};

// WebSocket连接相关（使用uni-app原生API）
let socketTask: any = null;
let heartbeatTimer: number | null = null;
const isConnected = ref(false);
const connectionStatus = ref('disconnected');

// 初始化WebSocket连接
const initWebSocket = () => {
  // 从storage中获取用户ID，如果没有则使用匿名用户
  const userId = isLoggedIn() ? getUserId() : formData.phone || 'anonymous';
  
  // WebSocket地址 - 使用原生WebSocket协议
  // 开发环境使用localhost，生产环境应使用实际域名
  const wsUrl = `ws://localhost:9502/ws/user/${userId}`;
  
  console.log('WebSocket连接地址:', wsUrl);
  
  try {
    // 先关闭现有连接
    if (socketTask) {
      try {
        socketTask.close();
        console.log('关闭现有WebSocket连接');
      } catch (error) {
        console.log('关闭现有连接时出错:', error);
      }
    }

    // 使用uni-app的connectSocket API建立连接
    socketTask = uni.connectSocket({
      url: wsUrl,
      success: () => {
        console.log('WebSocket连接成功');
      }
    });
    
    // 监听连接打开事件
    socketTask.onOpen(() => {
      console.log('WebSocket已连接');
      isConnected.value = true;
      connectionStatus.value = 'connected';
      
      // 开始心跳
      startHeartbeat();
      
      // 发送上线消息
      sendMessage({
        type: 'online',
        userId: userId,
        timestamp: new Date().toISOString()
      });
    });

    // 监听消息接收事件
    socketTask.onMessage((res: any) => {
      try {
        let message;
        try {
          // 尝试解析JSON格式消息
          message = JSON.parse(res.data);
        } catch (e) {
          // 如果是纯字符串消息，包装成对象
          message = { msg: res.data };
        }
        handleWebSocketMessage(message);
      } catch (error) {
        console.error('处理WebSocket消息失败:', error);
      }
    });

    // 监听连接关闭事件
    socketTask.onClose(() => {
      console.log('WebSocket连接关闭');
      isConnected.value = false;
      connectionStatus.value = 'disconnected';
      stopHeartbeat();
      
      // 尝试重连
      setTimeout(() => {
        if (!isConnected.value) {
          console.log('尝试重连WebSocket...');
          initWebSocket();
        }
      }, 5000);
    });

    // 监听连接错误事件
    socketTask.onError((error: any) => {
      console.error('WebSocket连接错误:', error);
      isConnected.value = false;
      connectionStatus.value = 'error';
    });
    
  } catch (error) {
    console.error('创建WebSocket连接失败:', error);
    connectionStatus.value = 'error';
  }
};

// 处理WebSocket消息
const handleWebSocketMessage = (message: any) => {
  console.log('收到WebSocket消息:', message);
  
  // 适配后端消息格式：rescue_fail 和 rescue_success
  if (message.rescue_fail || message.rescue_success) {
    const rescueData = message.rescue_fail || message.rescue_success;
    const messageType = message.rescue_fail ? 'rescue_fail' : 'rescue_success';
    
    console.log(`救援${messageType === 'rescue_fail' ? '失败' : '成功'}消息:`, rescueData);
    
    // 显示消息弹窗
    if (rescueData.message) {
      uni.showModal({
        title: '救援通知',
        content: rescueData.message,
        showCancel: false,
        confirmText: '知道了'
      });
    }
    
    // 根据消息类型处理
    if (messageType === 'rescue_success') {
      // 救援成功，商家正在赶来
      console.log('商家正在赶来，商家ID:', rescueData.merchantId);
      uni.showToast({
        title: '商家已接单',
        icon: 'success'
      });
    } else if (messageType === 'rescue_fail') {
      // 救援失败
      console.log('救援失败，原因:', rescueData.message);
      uni.showToast({
        title: '救援失败',
        icon: 'error'
      });
    }
    
    return;
  }
  
  // 显示通用消息弹窗
  if (message.msg) {
    uni.showModal({
      title: '救援通知',
      content: message.msg,
      showCancel: false,
      confirmText: '知道了'
    });
  }
  
  switch (message.type) {
    case 'heartbeatAck':
      // 心跳响应，无需处理
      break;
      
    case 'rescueUpdate':
      // 救援状态更新
      console.log('救援状态更新:', message);
      uni.showToast({
        title: '救援状态更新',
        icon: 'none'
      });
      break;
      
    case 'rescueAccepted':
      // 救援已被接受
      console.log('救援已被接受:', message);
      uni.showModal({
        title: '救援通知',
        content: '救援已被商家接单，商家正在赶来...',
        showCancel: false,
        confirmText: '知道了'
      });
      break;
      
    case 'rescueCompleted':
      // 救援已完成
      console.log('救援已完成:', message);
      uni.showModal({
        title: '救援通知',
        content: '救援已完成，感谢您的使用！',
        showCancel: false,
        confirmText: '知道了'
      });
      break;
      
    case 'merchantFound':
      // 找到附近商家
      console.log('找到附近商家:', message);
      uni.showToast({
        title: '已通知附近商家',
        icon: 'success'
      });
      break;
      
    case 'noMerchant':
      // 附近无商家
      console.log('附近无商家:', message);
      uni.showModal({
        title: '救援通知',
        content: '附近暂无可用商家，正在扩大搜索范围...',
        showCancel: false,
        confirmText: '知道了'
      });
      break;
      
    default:
      console.log('未知的消息类型:', message.type);
      // 如果是后端推送的普通消息，也显示
      if (message.data) {
        uni.showToast({
          title: message.data.msg || '收到新消息',
          icon: 'none'
        });
      }
  }
};

// 发送消息（使用uni-app原生API）
const sendMessage = (message: any) => {
  if (isConnected.value && socketTask) {
    try {
      uni.sendSocketMessage({
        data: JSON.stringify(message),
        success: () => {
          console.log('WebSocket发送消息成功:', message);
        },
        fail: (error: any) => {
          console.error('WebSocket发送消息失败:', error);
        }
      });
    } catch (error) {
      console.error('发送消息时发生错误:', error);
    }
  } else {
    console.warn('WebSocket连接未就绪，无法发送消息');
  }
};

// 开始心跳
const startHeartbeat = () => {
  if (heartbeatTimer) {
    clearInterval(heartbeatTimer);
  }
  
  heartbeatTimer = setInterval(() => {
    if (isConnected.value && socketTask) {
      try {
        sendMessage({
          type: 'heartbeat',
          timestamp: new Date().toISOString()
        });
      } catch (error) {
        console.error('发送心跳失败:', error);
      }
    }
  }, 30000); // 30秒心跳一次
};

// 停止心跳
const stopHeartbeat = () => {
  if (heartbeatTimer) {
    clearInterval(heartbeatTimer);
    heartbeatTimer = null;
  }
};

// 关闭WebSocket连接（使用uni-app原生API）
const closeWebSocket = () => {
  // 关闭WebSocket连接
  if (socketTask) {
    try {
      socketTask.close();
      console.log('关闭WebSocket连接');
    } catch (error) {
      console.error('关闭WebSocket连接时出错:', error);
    }
    socketTask = null;
  }
  
  // 停止心跳
  stopHeartbeat();
  
  // 重置连接状态
  isConnected.value = false;
  connectionStatus.value = 'disconnected';
};

// 地图区域变化事件 - 使用any类型避免TypeScript错误
const handleRegionChange = (e: any): void => {
  console.log('地图区域变化:', e.detail);
  
  // 检查是否是用户主动操作（拖动、缩放等），排除初始化时的自动触发
  if (e.detail && e.detail.trigger === 'setdata') {
    // 这是地图初始化或数据更新时的自动触发，忽略
    return;
  }
  
  // 只有用户主动操作时才处理（拖动、缩放等）
  if (e.detail && (e.detail.trigger === 'drag' || e.detail.trigger === 'scale')) {
    console.log('用户操作地图:', e.detail.trigger);
    // 可以在这里处理地图拖动、缩放等用户主动操作
    
    // 可选：实时更新救援位置信息给后台
    sendMessage({
      type: 'locationUpdate',
      longitude: longitude.value,
      latitude: latitude.value,
      timestamp: new Date().toISOString()
    });
  }
};
</script>

<style scoped lang="scss">
.alarm-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 80rpx;
}



.warning-notice {
  background-color: #fff3cd;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 8rpx;
}

.warning-text {
  color: #856404;
  font-size: 24rpx;
}

.map-area {
  height: 300rpx;
  margin: 20rpx;
  background-color: #e9ecef;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

.locate-button {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.locate-button:active {
  background-color: rgba(245, 245, 245, 0.9);
}

.locate-icon {
  font-size: 40rpx;
}

/* WebSocket连接状态样式 */
.connection-status {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.connection-status.connected {
  border-left: 4rpx solid #52c41a;
}

.connection-status.disconnected {
  border-left: 4rpx solid #faad14;
}

.connection-status.error {
  border-left: 4rpx solid #ff4d4f;
}

.status-icon {
  font-size: 20rpx;
}

.status-text {
  color: #666;
}

.service-types {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: white;
  margin-bottom: 20rpx;
}

.service-tab {
  font-size: 32rpx;
  padding: 10rpx 20rpx;
  color: #666;
  transition: all 0.3s;
}

.service-tab.active {
  color: #ff6b6b;
  border-bottom: 4rpx solid #ff6b6b;
  font-weight: bold;
}

.service-tab:active {
  background-color: rgba(255, 107, 107, 0.1);
}

.form-container {
  background-color: white;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #333;
}

.description-area {
  margin-top: 40rpx;
}

.description-label {
  font-size: 28rpx;
  color: #ff6b6b;
  line-height: 40rpx;
}

.emergency-contacts {
  background-color: white;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.emergency-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-number {
  color: #409eff;
  font-size: 32rpx;
  font-weight: bold;
}

.action-buttons {
  padding: 0 20rpx;
  text-align: center;
  margin-top: 20rpx;
}

.call-button {
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 40rpx;
  height: 90rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  margin-bottom: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.call-button:active {
  opacity: 0.8;
}

.record-link {
  color: #409eff;
  font-size: 28rpx;
  display: inline-block;
  padding: 10rpx;
}

.record-link:active {
  color: #66b1ff;
}
</style>